<template>
  <el-form :model="formInline" :rules="rulesList" ref="formInline" class="goods-wrapper" label-width="130px">
    <el-row v-for="(item, index) in formInfo" :key="index">
      <div v-if="item.title" class="goods-wrapper_line"><span style="padding-left: 5px;">{{item.title}}</span></div>
      <el-col v-if="item.leftChild && item.leftChild.length > 0 " :span="9" :offset="2">
        <el-form-item v-if="formInline.productNo && index === 0" label="商品编码"><span>{{formInline.productNo ? formInline.productNo : ''}}</span></el-form-item>
        <el-form-item v-for="(it, indexs) in item.leftChild" 
                      :key="indexs" 
                      :label="it.label" 
                      :prop="it.prop">
          <span v-if="pageType !== 'new' && it.type === 'span'">121212</span>
          <el-cascader v-if="it.type === 'cascader'" style="width: 100%;"
            v-model="formInline[it.prop]"
            :options="optionList[it.classList]"
            :placeholder="'请选择' + it.label"
            @change="handleChange"></el-cascader>
          <el-select v-if="it.type === 'select'" 
                     v-model="formInline[it.prop]"
                     :placeholder="'请选择' + it.label"
                     filterable
                     @change="(val) => onChangeSelect(val, {code: it.prop, name: it.propName, valueName: it.optionLabel, valueCode: it.optionValue})" 
                     style="width: 100%;" clearable>
             <el-option v-for="(op, indexOpOne) in optionList[it.prop]"
                        :label="op[it.optionLabel]"
                        :key="indexOpOne"
                        :value="op[it.optionValue]"></el-option>
          </el-select>
          <el-input v-if="it.type === 'input'" 
                    :type="it.inputType" 
                    v-model="formInline[it.prop]" 
                    :placeholder="'请输入' + it.label"
                    clearable
                    :disabled="it.disable"></el-input>
          <el-input v-if="it.type === 'textarea'" 
                    :type="it.inputType" 
                    v-model="formInline[it.prop]" 
                    :placeholder="'请输入' + it.name" 
                    :disabled="it.disable"></el-input>
          <el-date-picker style="width: 100%;"
            v-if="it.type === 'date'"
            value-format="yyyy-MM-dd MM:dd:ss"
            v-model="formInline[it.prop]"
            type="datetime"
            :placeholder="'请选择' + it.label" @change="(val) => {onChangeDataRight(val, it.prop)}">
          </el-date-picker>
          <el-upload
            v-if="it.type === 'upload'"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog v-if="it.type === 'upload'" :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <el-switch v-if="it.type === 'switch'" v-model="formInline[it.prop]"></el-switch>
        </el-form-item>
      </el-col>
      <el-col v-if="item.rightChild && item.rightChild.length > 0" :span="9" :offset="2">
        <!-- <el-form-item v-if="pageType !== 'new' && item.title === '基本信息'" label="商品编码"><span></span></el-form-item> -->
        <el-form-item v-for="(it, indexs) in item.rightChild" :key="indexs" :label="it.label" :prop="it.prop">
          <el-select v-if="it.type === 'select'" 
                     v-model="formInline[it.prop]"
                     :placeholder="'请选择' + it.label"
                     filterable
                     @change="(val) => onChangeSelect(val, {code: it.prop, name: it.propName, valueName: it.optionLabel, valueCode: it.optionValue})" 
                     style="width: 100%;" clearable>
            <el-option v-for="(op, indexOp) in optionList[it.prop]"
                        :label="op[it.optionLabel]"
                        :key="indexOp"
                        :value="op[it.optionValue]"></el-option>
          </el-select>
          <el-input v-if="it.type === 'input'" 
                    :type="it.inputType" 
                    v-model="formInline[it.prop]" 
                    :placeholder="'请输入'+it.label"
                    clearable
                    :disabled="it.disable"></el-input>
          <el-date-picker style="width: 100%;"
            v-if="it.type === 'date'"
            value-format="yyyy-MM-dd MM:dd:ss"
            v-model="formInline[it.prop]"
            type="datetime"
            :placeholder="'请选择' + it.label" @change="(val) => {onChangeDataRight(val, it.prop)}">
          </el-date-picker>
          <el-switch v-if="it.type === 'switch'" v-model="formInline[it.prop]"></el-switch>
          <el-checkbox v-if="it.type === 'checkout'" v-model="formInline[it.prop]" checked></el-checkbox>
        </el-form-item>
      </el-col>
    </el-row>
     <el-form-item class="text_align" style="margin-bottom: 60px;">
      <el-button type="primary" @click="onConfirm('formInline')">确定</el-button>
      <el-button @click="onCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import {getSelectName} from '@/common/utils'
import {cloneDeep} from 'lodash'
export default {
  name: 'form-marker-biserial',
  props: {
    isEdit: Boolean,
    formData: {
      type: Array
    },
    rulesList: {
      type: Object
    },
    isShowTitle: {
      type: Boolean
    },
    selectList: {
      type: Object
    },
    eidtList: {
      type: Object
    }
  },
  data () {
    return {
      formInfo: this.formData,
      // formInline: {},
      // selectlist: {},
      dialogImageUrl: '',
      dialogVisible: false,
      pageType: ''
    }
  },
  computed: {
    optionList: {
      get () {
        return this.selectList
      },
      set (val) {
        this.selectList = val
      }
    },
    formInline: {
      get () {
        return this.eidtList
      }
    }
  },
  watch: {
    formData: function (currentValue) {
      this.formInfo = currentValue
    }
  },
  mounted () {
    // this.formInline.minOrderNumber = 1
  },
  methods: {
    onChangeSelect (val, params) {
      let currentSelectList = cloneDeep(this.optionList[params.code])
      this.formInline[params.code] = val
      this.formInline[params.name] = getSelectName(val, params, currentSelectList)
    },
    onConfirm (formName) {
      if (this.formInline.forepart_type || this.formInline.middle_type || this.formInline.posterior_type) {
        this.$emit('on-validate', true)
      } else {
        this.$emit('on-validate', false)
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.onSave()
        } else {
          return false
        }
      })
    },
    onCancel () {
      this.$router.push({name: 'seriaNumber'})
    },
    onSave () {
      // 调保存接口
      this.$emit('on-confirm', this.formInline)
    },
    async getProductSelect (code) {
      let {data} = await this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mproductclasses/list`, {itemType: 0, parentCode: code})
      let currentList = data
      this.optionList.classList[0].cities = currentList.map((val) => {
        return {
          label: val.name,
          value: val.code
        }
      })
    },
    handleChange () {},
    handleItemChange (val) {
      this.getProductSelect(val.toString())
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    onChangeDataLeft (val, type) {
      this.$emit('on-validateDate', {marketDate: this.formInline.marketDate, delistingDate: this.formInline.delistingDate, orderDeadline: this.formInline.orderDeadline, type: type})
    },
    onChangeDataRight (val, type) {
      this.$emit('on-validateDate', {marketDate: this.formInline.marketDate, delistingDate: this.formInline.delistingDate, orderDeadline: this.formInline.orderDeadline, type: type})
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-wrapper{
  background-color: white;
  padding: 20px;
  &_line{
    border-left: 5px #409EFF solid;
    margin: 20px 0;
  }
  .text_align{
    text-align: center
  }
}
</style>

